27 Februari 2024

Do’a Belajar

Outline

  • Tahapan UI Design
  • Rule of 8
  • Auto Layout
  • Figma local style
  • Efficienct Designer with Plugins
  • Design System

Tahapan UI Design

Proses UI Design

Pada membuat user interface. Seorang UI/UX Designer tidak langsung membuat di Figma.

Alasannya:
    • Menghemat waktu
    • Mengurangi kesalahan
    • Membuat kesepatan dengan tim

Proses UI Design

Insights

Insight adalah nilai yang diperoleh dari analisis data secara kualitatif atau kuantitaif yang berisi pola dan tren.

Insight dapat digunakan untuk membuat keputusan yang lebih tepat.

Insighhts:
    • Menampilkan informasi kandungan pada produk
    • Menampilkan informasi produk serupa lainnya
    • Review yang berasal dari berbagai influencer

Sketching

Sketching adalah proses membuat fitur produk pada kertas. Tujuannya untuk mengkomunikasikan ide-ide produk kepada tim.

Selain itu:
    • Menampung ide-ide yang muncul
    • Mendokumentasikan proses
    • Memilih ide yang akan digunakan

Contoh Sketching

Wireframing

Wireframing adalah membuat kerangka dasar website atau aplikasi. Wireframe dibuat sebelum masuk ke desain yang lebih nyata.

Wireframe menunjukkan:
    • Desain dasar
    • Fungsi user interface
    • Isi konten

Contoh Wireframe

Components

Komponen adalah elemen visual yang membentuk layout dari user interface. Komponen dapat digunakan berulang-ulang dalam berbagai bagian produk baik aplikasi dan/atau website.

Contohnya:
    • Warna
    • Button
    • Text

Contoh Components

User Flow

User flow adalah serangkaian langkah yang harus dilakukan pengguna untuk menyelesaikan tugas di situs web atau aplikasi.

User flow juga dapat diartikan sebagai alur pengguna.

Contoh User Flow

Mock Up

Mockup adalah rancangan desain yang akan diterapkan pada produk. Dalam UI/UX desain, mockup meliputi elemen tampilan visual, warna, tipografi, dan navigasi.

Manfaat:
    • Menghemat waktu dan biaya
    • Menciptakan produk yang sesuai dengan kebutuhan pengguna
    • Memiliki gambaran realistis

Contoh Mock Up

Prototype

Prototype adalah simulasi produk akhir untuk menguji alur produk sebelum peluncuran.

Peran penting prototype:
    • Mengembangkan pengalaman pengguna
    • Menguji dan memvalidasi konsep sebelum memasuki tahap produksi

Contoh Prototype

Rule of 8

Apa itu Rule of 8?

Rule of 8 adalah prinsip untuk menentukan jarak antara elemen-elemen desain.

Tujuannya:
    • Agar mudah dibaca,
    • Desain menjadi teratur, dan
    • Mudah diakses oleh pengguna.

Rule of 8 biasanya digunakan oleh Google, Apple dan Bootstrap

Menggunakan Rule of 8

Rule of 8 umumnya terdapat pada jarak yang digunakan pada:
    • Padding
    • Margin
    • Dimention
    • Spacing

Margin, Padding, Spacing, Dimention

Auto Layout

Apa itu Auto Layout?

Auto Layout adalah fitur yang membuat desain menjadi dinamis. Fungsinya membuat desain responsif untuk web dan aplikasi.

Manfaat auto layout:
    • Membuat tombol dan elemen antarmuka secara otomatis menyesuaikan ukuran dan posisi kontainer induknya
    • Mengubah tinggi dan lebar objek desain secara dinamis mengikuti konten yang ada

Menggunakan Auto Layout

Cara menggunakan auto layout:
    • Klik kanan asset (teks, gambar, frame, dll)
    • Klik Add auto layout
    • Atau gunakan short cut Shift + A

Contoh Auto Layout

Figma local style

Apa itu local style?

Local styles adalah styles pada file saat ini.

Kelebihan menggunakan local style:
    • Membuat desain menjadi konsisten
    • Mempercepat proses desain

Local Style

Text/Typography

Text atau typography adalah salah satu elemen dasar dari local style, selain mendukung accessibility dan content readability, text ini bisa bisa jadi penentu tone dari product akhir yang akan dibuat.

Biasanya text dalam local style terdiri dari kombinasi 2 jenis font yang istilahnya biasa disebut font pairing

Text Size Scaling

Ini adalah text scaling dari Material UI yang memiliki skala tipografi yang terdefinisi dengan baik.

Ini berarti teks yang digunakan dalam desain harus mengikuti skala tipografi yang konsisten untuk memastikan tampilan yang rapi dan mudah dibaca.

Color

Colors juga merupakan salah satu elemen dasar dari local style, Fungsi dari color itu sendiri adalah untuk menciptakan “Identitas” dan juga tone dari brand produk digital kita.

Biasanya colors dibagi menjadi primary secondary, lalu accent yang bisa merupakan semantic color, grayscale color dll.

Type of Colors

Grid

Grid adalah grid panduan dalam mengatur teks dan gambar yang terdiri dari garis vertikal dan horizontal sehingga membuat format kolom dan margin

Contoh Grid

Effects

Effect yang bisa dijadikan local style. Effect ini bentuknya bisa bermacam macam mulai dari shadow hingga blur.

Type of Effects

Efficienct Designer with Plugins

Apa itu Plugin?

Plugins adalah aplikasi yang dibuat oleh Community yang berfungsi untuk menambahkan fitur pada figma. Plugin berjalan di dalam file, melakukan satu atau lebih action pengguna, dan memungkinkan pengguna untuk menyesuaikan pengalaman mereka atau membuat alur kerja yang lebih efisien.

Macam-macam Plugin

Iconify

Color Shades

Artboard Studio Mockup

Typescale

Logoipsum

Contrast

Unsplash

Remove BG

Design System

Apa itu Design System?

Design system adalah seperangkat aturan, pedoman, komponen, dan sumber daya desain yang diatur sedemikian rupa untuk memastikan konsistensi dalam desain visual dan interaksi antara pengguna dan produk.

Kelebihan menggunakan Design System

  • Meningkatkan konsistensi desain
  • Meningkatkan kolaborasi tim
  • Membuat pengembangan produk menjadi efisien, hemat waktu, dan fleksibel

Macam-macam Design System

Material Design

Material Design adalah design system yang dikembangkan oleh Google untuk membantu mengembangkan produk yang lebih menarik secara visual dan lebih mudah digunakan oleh pengguna.

Website
Figma Community

Polaris

Polaris adalah sistem desain untuk admin Shopify. Polaris menyediakan panduan dan design system, dan ikon untuk membangun aplikasi di admin Shopify.

Website
Figma Community

Apple Human Interface Guidelines (HIG)

Apple Human Interface Guidelines (HIG) adalah sekumpulan prinsip dan design system untuk membuat aplikasi dan antarmuka pengguna untuk platform Apple. Ini mencakup iOS, macOS, watchOS, dan tvOS

Website
Figma Community

Carbon

Carbon Design System adalah design system untuk produk dan pengalaman digital IBM. Sistem ini terdiri dari serangkaian gaya, komponen, dan pedoman yang digunakan untuk membuat UI yang terpadu.

Website
Figma Community